<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="include/base.jsp"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CRM</title>
	<link rel="stylesheet" href="${basePath }/css/bootstraplan.css" />
	<style type="text/css">
		#tag{
			background-image: url(${basePath }/img/highrise_sprites.png);
			no-repeat :none;
			background-position:-68px -180px;
			width: 42px;
			padding-top: 40px;
			padding-bottom:20px;
		}
		#defaulthead{
			background-image: url(${basePath }/img/highrise_sprites.png);
			no-repeat :none;
			background-position:-15px -15px;
			width: 40px;
			height:40px;
			padding-top: 10px;
		}
		.remove{
			background-image: url(${basePath }/img/highrise_sprites.png);
			no-repeat :none;
			background-position:-560px -126px;
			width: 24px;
			height:22px;
			padding:3px;
			padding-bottom:5px;
		}
		select{
			width:80px;
		}
		.gray{
			color:#999;
		}
		tr>td>div{
			margin-top:10px;
			margin-bottom:10px;
		
		}
		
	</style>
</head>
<body>
	<div class="navbar navbar-fixed-top"  style="background-color:#085F8A">
		<div class="navbar-inner" style="padding-top:20px">
			<div class="container">
				<div class="row-fluid">
					<div class="span1"  id="tag"></div>
					<div class="span2" style="padding-top:6px">
						<a href="" style="display:inline;font-size:20px;font-weight:bold;color:#fff">客户关系管理</a>
					</div>
					<div class="span6">
						<a href="${basePath }/addContact.action" class="btn">添加联系人</a>
						<a href="${basePath }/addTask.action" class="btn">添加新任务</a>
					</div>
					<div class="span3">
						<ul class="nav pull-right">
						    <li class="divider-vertical"></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 用户设置<b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">个人信息</a>
									</li>
									<li>
										<a href="#">修改密码</a>
									</li>
									<li>
										<a href="#">服务中心</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">安全退出</a>
							</li>
						</ul>
					
					
					</div>
				</div>
			</div>
		
		</div>
	
	</div>
	<div class="row-fluid">
		<div class="span3">
			<div style="padding-left:16px 0;margin-top:160px;margin-left:40px">
				<ul class="nav nav-list" >
					<li class="nav-header" style="padding-top:0px;font-size:16px">Welcome!</li>
					
					<li><a href="home.action"><i class="icon-user"></i>最新动态</a></li>
					<li class="active"><a href="contactlist.action"><i class="icon-user"></i>联系人</a></li>
					<li><a href="task/toCalendar.action"><i class="icon-leaf"></i>日程</a></li>
					<li><a href="deal.action"><i class="icon-gift"></i>交易</a></li>
					<li><a href="emails.action"><i class="icon-gift"></i>群发邮件</a></li>
				</ul>
			</div>
		</div>
		<div class="span6" style="margin-top:140px;padding:20px">
			
			<form action="${basePath}/saveContact.action" class="form-inline" method="post">
			
				<div style="padding:20px;border:1px solid #C8CECC;border-radius:5px 5px 0px 0px;background-color:#F0F5F8">
					<h4>添加一个联系人&nbsp;or&nbsp;<a href="${basePath }/addCompany.action">添加一个公司</a></h4>
				</div>
				<div style="border:1px solid #C8CECC;border-top:none;border-bottom:none;background-color:#F0F5F8;padding:20px">
					<table>
						<tr>
							<th>姓名：</th>
							<td>
								<div>
									<input type="text" name="contact.username">
								</div>
							</td>
						</tr>
						<tr>
							<th>职位：</th>
							<td>
								<div class="change" id="title_block" mod1="title_til" mod2="title_in" style="height:30px">
									<div id="title_til" class="gray"style="display:;width:500px;line-height:30px">添加职位</div>
									<div id="title_in" style="display:none;width:500px">
										<input type="text" name="contact.title"/>
									</div>
								</div>	
							</td>
						</tr>
						<tr>
							<th>公司：</th>
							<td>
								<div class="change" id="company_block" mod1="company_til" mod2="company_in"style="height:30px">
									<div  id="company_til" class="gray"style="display:;width:500px;line-height:30px">添加公司名</div>
									<div  id="company_in" style="display:none;width:500px">
										<input type="text" alt="" name="contact.company"/>
									</div>
								</div>	
							</td>
						</tr>
					</table>
				</div>	
				<div style="border:1px solid #C8CECC;padding-left:10px;padding-top:10px">
					<table>
						<tr>
							<th>电话：</th>
							<td>
								<div class="change"id="tel_block" mod1="tel_til" mod2="tel_in"style="height:30px">
									<div id="tel_til" class="gray" style="display:;width:500px;line-height:30px">添加电话</div>
									<div id="tel_in" style="display:none;width:500px">
										<input type="text" alt="tel_add"name="contact.telList.telnum"/>
										<select name="telList.type" id="">
											<option value="work" selected="selected">work</option>
											<option value="mobile">mobile</option>
											<option value="home">home</option>
											<option value="other">other</option>
										</select>
										<span class="remove"mode="tel_block"style="height:30px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
									</div>	
								</div>	
							</td>
						</tr>
					
						<tr id="tel">
							<th></th>
							<td>
								<div class="add" id="tel_add"  mag="tel" style="display:none;color:#999;">再添加一个</div>
							</td>
						</tr>
						
						<tr>
							<th>邮箱：</th>
							<td>
								<div class="change"id="email_block" mod1="email_til" mod2="email_in"style="height:30px">
									<div id="email_til" class="gray"style="display:;width:500px;line-height:30px">添加邮箱</div>
									<div id="email_in" style="display:none;width:500px">
										<input type="text" alt="email_add"name="contact.emailList.email"/>
										<select name="emailList.type" id="">
											<option value="work" selected="selected">work</option>
											<option value="home">home</option>
											<option value="other">other</option>
										</select>
										<span class="remove" mode="email_block"style="height:30px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
									</div>	
								</div>	
							</td>
						</tr>
						<tr id="email">
							<th></th>
							<td>
								<div class="add" id="email_add"  mag="email"style="display:none;color:#999;">再添加一个</div>
							</td>
						</tr>
						<tr>
							<th>即时通讯：</th>
							<td>
								<div class="change"id="im_block" mod1="im_til" mod2="im_in"style="height:30px">
									<div id="im_til" class="gray"style="display:;width:500px;line-height:30px">添加即时通讯</div>
									<div id="im_in" style="display:none;width:500px">
										<input type="text" alt="im_add" name="contact.imList.im"/>
										<select name="imList.im" id="">
											<option value="QQ" selected="selected">QQ</option>
											<option value="MSN">MSN</option>
											<option value="Yahoo">Yahoo</option>
											<option value="other">other</option>
										</select>
										<select name="imList.type" id="">
											<option value="work" selected="selected">work</option>
											<option value="personal">personal</option>
											<option value="other">other</option>
										</select>
										<span class="remove" mode="im_block"style="height:30px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
									</div>
								</div>	
							</td>
						</tr>
						<tr id="im">
							<th></th>
							<td>
								<div class="add" id="im_add"  mag="im" style="display:none;color:#999;">再添加一个</div>
							</td>
						</tr>
						<tr>
							<th>个人主页：</th>
							<td>
								<div class="change" id="websit" mod1="website_til" mod2="website_in"style="height:30px">
									<div id="website_til" class="gray"style="display:;width:500px;line-height:30px">添加个人主页</div>
									<div id="website_in" style="display:none;width:500px">
										<input type="text" name="contact.website"/>
									</div>
								</div>	
							</td>
						</tr>
						<tr>
							<th>微博：</th>
							<td>
								<div class="change" id="weibo" mod1="weibo_til" mod2="weibo_in" style="height:30px">
									<div  id="weibo_til" class="gray" style="display:;width:500px;line-height:30px">添加微博地址</div>
									<div  id="weibo_in" style="display:none;width:500px">
										<input type="text" name="contact.weibo"/>
									</div>
								</div>	
							</td>
						</tr>
						<tr>
							<th>地址：</th>
							<td>
								<div class="change"id="address_block" mod1="address_til" mod2="address_in"style="height:30px">
									<div id="address_til" class="gray" style="display:;width:500px;line-height:30px">添加地址</div>
									<div id="address_in" style="display:none;width:500px">
										<input type="text" alt="address_add"name="contact.addressList.address"/>
										<select name="contact.addressList.type" id="">
											<option value="work" selected="selected">work</option>
											<option value="home">home</option>
											<option value="other">other</option>
										</select>
										<span class="remove" mode="address_block"style="height:30px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
									</div>
									
								</div>	
							</td>
						</tr>
						<tr id="address">
							<th></th>
							<td>
								<div class="add" id="address_add"  mag="address" style="display:none;color:#999;">再添加一个</div>
							</td>
						</tr>
					</table>
					<div style="margin-bottom:20px">
						<div><b>个人简介：</b></div>
						<div>
							<textarea  style="width:500px" rows="6" name="contact.info"></textarea>
						</div>
					</div>
					<div style="margin-top:20px;margin-bottom:20px;">
						<button type="submit" class="btn">添加</button>&nbsp;or&nbsp;<a href="${basePath}/contactlist.action">取消</a>
					</div>
				
					
					
				</div>	
				
	
			</form>
			
		</div>	
		<div class="span3" style="margin-top:170px">
			<div style="width:160px;border:1px solid #999;border-radius:5px;padding:15px; ">
				 <h4>导入联系人</h4>
				 <h6>这里有简便快速的,批量导入联系人的快捷方式，您只要点击下面链接,选择
				您要导入的数据文件，我们可以帮您一键导入全部。</h6>
				 <code>目前暂支持Excel数据导入。</code><br />
				 <a href="${basePath}/addfile.action">导入Excel文件</a>
			</div>
		
		</div>
	</div>
	
	
	<script type="text/javascript" src="${basePath }/js/jquery.js"></script>
	<script type="text/javascript" src="${basePath }/js/bootstrap.min.js"></script>
	<script type="text/javascript">	
		$(document).ready(function(){
			$(".change").live("click",function () {
				var a = $(this).attr('mod1');
				var b = $(this).attr('mod2');
				$("#"+a).css({"display":"none"});
				$("#"+b).css({"display":""});
			  });
			
			$("input").live("blur",function(){
				if(!$("select").is(":focus")){
					var value = $(this).attr("value");
					var mod1= $(this).parent().parent().attr('mod1');
					var mod2= $(this).parent().parent().attr('mod2');
					if(value==""){
						$("#"+mod2).css({"display":"none"});
						$("#"+mod1).css({"display":""});	
					}
					
				}else{
					
					
				}
			});
			$(".remove").live("mouseover",function(){
				$(this).css({"background-position":"-560px -149px"});
			});
			$(".remove").live("mouseout",function(){	
			$(this).css({"background-position":"-560px -126px"});
			});
			
			$(".remove").live("click",function(){
				var mode = $(this).attr("mode");
				$("tr").remove("#"+mode);
			
			});
			$("input").live("keydown",function(){
				var e = $(this).attr("alt");
				var f = $(this).attr("value");
				$("#"+e).css({"display":""});
			
			});
			$("input").live("keyup",function(){
				var e = $(this).attr("alt");
				var f = $(this).attr("value");
				if(f==""){
					$("#"+e).css({"display":"none"});
				}
			
			});
			var n1 = 1;
			var n2 = 1;
			var n3 = 1;
			var n4 = 1;
			var reg1 = /^tel/;
			var reg2 = /^email/;
			var reg3 = /^im/;
			var reg4 = /^address/;
			$(".add").live("click",function(event){
				var a = $(this).attr("mag");
				if(reg1.test(a)){
					$("#"+a).replaceWith("<tr id='tel_block"+n1+"'><th></th><td><div style='height:30px'><div style='display:;width:500px'><input type='text' alt='tel_add"+n1+"'name='contact.telList.telnum'/><select name='contact.telList.type' id=''><option value='work' selected='selected'>work</option><option value='mobile'>mobile</option><option value='home'>home</option><option value='other'>other</option></select><span class='remove' mode='tel_block"+n1+"' style='height:30px'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div></div></td></tr><tr id='tel"+n1+"'><th></th><td><div class='add' id='tel_add"+n1+"'  mag='tel"+n1+"' style='display:none;color:#999;'>再添加一个</div></td></tr>");			
					n1 = n1 +1;
					return ;
				}else if(reg2.test(a)){
					$("#"+a).replaceWith("<tr id='email_block"+n2+"'><th></th><td><div style='height:30px'><div style='display:;width:500px'><input type='text' alt='email_add"+n2+"' name='contact.emailList.email'/><select name='contact.emailList.type' id=''><option value='work' selected='selected'>work</option><option value='home'>home</option><option value='other'>other</option></select><span class='remove' mode='email_block"+n2+"'style='height:30px'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div></div></td></tr><tr id='email"+n2+"'><th></th><td><div class='add' id='email_add"+n2+"'  mag='email"+n2+"'style='display:none;color:#999;'>再添加一个</div></td></tr>");
					n2=n2+1;
					return ;
				
				}else if(reg3.test(a)){
					$("#"+a).replaceWith("<tr id='im_block"+n3+"' ><th></th><td><div style='display:;width:500px'><input type='text' alt='im_add"+n3+"' name='contact.imList.im'/><select name='contact.imList.sort' id=''><option value='QQ' selected='selected'>QQ</option><option value='MSN'>MSN</option><option value='Yahoo'>Yahoo</option><option value='other'>other</option></select><select name='contact.imList.type' id=''><option value='work' selected='selected'>work</option><option value='personal'>personal</option><option value='other'>other</option></select><span class='remove' mode='im_block"+n3+"'style='height:30px'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div></div></td></tr><tr id='im"+n3+"'><th></th><td><div class='add' id='im_add"+n3+"'  mag='im"+n3+"' style='display:none;color:#999;'>再添加一个</div></td></tr>");
					n3=n3+1;
					return ;
				}else if(reg4.test(a)){
					$("#"+a).replaceWith("<tr id='address_block"+n4+"'><th></th><td><div style='height:30px'><div style='display:;width:500px'><input type='text' alt='address_add"+n4+"'name='contact.addressList.address'/><select name='contact.addressList.type' id=''><option value='work' selected='selected'>work</option><option value='home'>home</option><option value='other'>other</option></select><span class='remove' mode='address_block"+n4+"'style='height:30px'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div></div></div></td></tr><tr id='address"+n4+"'><th></th><td><div class='add' id='address_add"+n4+"'  mag='address"+n4+"' style='display:none;color:#999;'>再添加一个</div></td></tr>");
					n4=n4+1;
					return ;
				}
				
				
					
			});
			
		});	
		
		
	</script>
	
</body>
</html>